<template>
    <payModule :columns="columns" :tableData="tableData" :tableloading="tableloading">
    <template v-slot:orderDetail[0].imageUrl="{row}">
        <img :src="row.orderDetail[0].imageUrl" alt="" >
    </template>
    <template v-slot:actions="{row}">
        <el-button type="success" size="small" 
        :disabled="row.order_status === 4 || row.pay_status==1" @click="gotopay(row)">
                <template #icon>
                    <i class="iconfont icon-chongzhi"></i>
                </template>
            <template #default >
                    去支付
            </template>
        </el-button>
        <el-button type="danger" size="small">
                <template #icon>
                    <i class="iconfont icon-tuichu2"></i>
                </template>
            <template #default >
                    删除
            </template>
        </el-button>
    </template>
    <template v-slot:shiping_status="{row}">
            {{row.shiping_status?'已支付':'未支付'}}
    </template>
    <template v-slot:order_status="{row}">
            {{orderSta(row)}}
    </template>
    </payModule>
</template>
<script setup>
import {ref} from 'vue'
import * as api from '@/api/pay.js'
import payModule from '../../../../components/payModule/index.vue'
import {useRouter} from 'vue-router'
let router = useRouter()
let columns = ref([
    {
        label:'产品图片',
        prop:'orderDetail[0].imageUrl'
    },
    {
        label:'订单编号',
        prop:'order_id'
    },
    {
        label:'产品名称',
        prop:'orderDetail[0].productName'
    },
    {
        label:'数量',
        prop:'orderDetail[0].quantity'
    },
    {
        label:'总价格',
        prop:'total_fee'
    },
    {
        label:'创建时间',
        prop:'create_time'
    },
    {
        label:'支付状态',
        prop:'shiping_status'
    },
    {
        label:'订单状态',
        prop:'order_status'
    },

    {
        label:'操作',
        prop:'actions'
    },
])
let tableData = ref([])
let tableloading = ref(false)
let getOrderStatus =async()=>{
    tableloading.value = true
    try{
        // tableloading
        let res =await api.getOrderApi()
        tableData.value = res.data.data
        console.log(res);
        tableloading.value = false
        
    }catch(e){
        tableloading.value = false
        console.log(e);
    }
}
getOrderStatus()

let orderSta = (row)=>{
    // console.log(row);
    switch(row.order_status){
        case 0:
            return '未提交' ;
        case 1:
            return '提交成功' ;
        case 2:
            return '已经取消' ;
        case 3:
            return '无效订单' ;
        case 4:
            return '交易关闭' ;
        case 5:
            return '退货';
    }
}
let gotopay = (row)=>{
    console.log(row);
    router.push({path:('/pay/payOrder'),query:{orderId:row.order_id}})
}
</script>
<script>
export default{
    meta:{
        title: 'order', name: '订单管理',
        iconfont:'#icon-dd'
        
    }
}

</script>
<style scoped>
    img{
        width: 50%;
    }

</style>
